<template>
	<view class="content">
		<view class="detailName card">
			<text class="dn1">{{state.detailsData.jobName}}·{{state.detailsData.jobCategoryName}}</text>
			<text class="dn2"
				v-if="state.detailsData.comprehensiveSalaryType == 1">{{state.detailsData.comprehensiveSalaryStart}}-{{state.detailsData.comprehensiveSalaryEnd}}元/月</text>
			<text class="dn2" v-else>面议</text>
			<text class="dn3">{{getEdu(state.detailsData.educationRequirements)}} |
				{{getWork(state.detailsData.workExperienceTime)}} | {{getAge(state.detailsData.age)}}</text>
		</view>
		<view class="detailTag card">
			<text class="dt1">岗位福利</text>
			<view class="dt2">
				<text v-for="(item,idx) in state.detailsData.basicBenefitsArr" :key="idx">{{item}}</text>
			</view>
		</view>
		<view class="detailIntro card">
			<view class="di1">职位描述</view>
			<view class="detailZw" style="color: #999;font-size: 14px;">
				<u-parse :content="state.detailsData.jobDescription2"></u-parse>
			</view>
		</view>
		<view class="detailAddress card">
			<view class="da1">
				工作地址
			</view>
			<view class="da2"> <div style="width: 100%;">
				<map v-if="!modalData.show" style="width: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"></map></div>

			</view>
			<view class="da3">
				{{state.detailsData.address}}
			</view>
		</view>
		<view class="detailCompany card">
			<view class="dc1" @click="companyDetail">
				<text>公司名称</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="dc2">
				{{state.detailsData.companyInfo}}
			</view>
			<view class="dc3">
				<image :src="state.detailsData.companyLogo" mode="widthFix" class='companyImg'></image>
			</view>
		</view>
	</view>
	<view class="detailBottom">
		<view class="dbLeft">
			<view class="db1" @click="toPhone()">
				<u-icon name="phone"></u-icon>
				<text class="dbText">电话</text>
			</view>
			<view class="db1" @click="toIm()">
				<u-icon name="chat"></u-icon>
				<text class="dbText">聊一聊</text>
			</view>
			<view class="db1" @click="eventFun('collect')">
				<u-icon name="star-fill" v-if="state.detailsData.isColl ==1"></u-icon>
				<u-icon name="star" v-else></u-icon>

				<text class="dbText">收藏</text>
			</view>
		</view>

		<u-button v-if="state.detailsData.isLog==1" class="dbBtn" @click="toIm()"
			>{{'继续沟通'}}</u-button>
		<u-button v-else class="dbBtn" @click="eventFun('apply')"
			>{{'立即申请' }}</u-button>
	</view>

	<u-modal :show="modalData.show" :closeOnClickOverlay="true" :title="modalData.title">
		<view class="content-main" slot="content">{{modalData.content}}</view>
		<template #confirmButton>
			<u-button class="custom-style" text="我知道了" type="info"
				@click="modalData.show= false"></u-button>
		</template>
	</u-modal>
</template>

<script lang="ts" setup>
	import { ref, reactive, getCurrentInstance } from "vue";
	import { useRouter } from 'uni-mini-router'
	import { onLoad } from '@dcloudio/uni-app';
	// #ifdef APP-PLUS
	import * as im from '@/common/im.js';
	// #endif
import {
	userStore
} from "@/pinia";

	import { getEdu, getWork, getAge } from '@/utlis/common.js'
	const router = useRouter()
	const { proxy } = getCurrentInstance()

	// 判断是否沟通过
	let concat = ref(false);

	let state = reactive({
		detailsData: {}
	})
	
	const getMap =(e) => {
		
		uni.request({
			url: 'https://apis.map.qq.com/ws/geocoder/v1/',//腾讯官方逆解析接口，可直接复制
				data: {

				'address':e,
				'key': "O6DBZ-CGPCZ-HM2XW-T2J45-NJRN3-YMB6J",//自己申请的Key
				},
				method: "GET",
				success(res) {
					console.log(res,'解析成功返回的参数');
					console.log(res.data.result.location.lat,'解析成功返回的参数lat');
					console.log(res.data.result.location.lng,'解析成功返回的参数lng');
					
					latitude.value = res.data.result.location.lat
					longitude.value = res.data.result.location.lng
					
					console.log(latitude.value)
				}
			})
							

		
	}
	
	let latitude = ref(39.909)
	let longitude = ref(116.39742)
	let covers = ref([
		{
			latitude: 38.99139,
			longitude: 121.593086,
			title: '',
			iconPath: '../../../static/location.png',
			// #ifdef APP-PLUS

			// #endif
			// #ifndef APP-PLUS
			// iconPath: '../../../static/location.png',
			// #endif
		}
	])
	const companyDetail = () => {
		router.push({
			name: 'companyDetail',
			params: {
				companyId: state.detailsData.companyId
			}
		})
	}
	let modalData = reactive({
		show: false,
		title: '投递成功！',
		content: '',
	})
	let jobId = ref('')
	onLoad((options) => {
		jobId.value = options.id
		getDetail()

	})
	const getDetail = () => {
		//获取详情
		proxy.$req('GET', proxy.$api.getMeiyeRecruitJob2Details, {
			id: jobId.value,
		}).then(async (res) => {
			if (res.code === 200) {
				if (res.result.basicBenefits) {
					res.result.basicBenefitsArr = res.result.basicBenefits.split(',')
				} else {
					res.result.basicBenefitsArr = []
				}
				state.detailsData = res.result
				latitude.value = res.result.latitude
				longitude.value = res.result.longitude
				covers.value[0].latitude= res.result.latitude
				covers.value[0].longitude= res.result.longitude
				console.log("getMeiyeRecruitJob2Details",res)
				console.log(res.result.cityName+res.result.areaName+res.result.address)
				// getMap(res.result.cityName+res.result.areaName+res.result.address)
				concat.value = await im.isContact();
				console.log('concat', concat.value);

			}
		})
	}

	const eventFun = (type) => {
		switch (type) {
			case 0:

				break;
			case 'collect':
				if (state.detailsData.isColl == 1) {
					meiyeCollection2DeleteFun()
				} else {
					meiyeCollection2AddFun()
				}
				break;
			case "apply":
				meiyeCollection2ApplyFun()
				break;
			default:
				break;
		}
		
		//刷新页面
		getDetail()
		
	}
	// 打电话
	const toPhone = ()=>{
		uni.makePhoneCall({
		  phoneNumber: state.detailsData.contactsPhone
		});
	}
	
	// 聊一聊
	const toIm = () => {
		
		const { memberId, id } = state.detailsData;
		// 获取存储信息
		const userStoreInfo = userStore();
		const userId = userStoreInfo.userInfo.id;
	
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		console.log('工作  工作 state.detailsData', state.detailsData);
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'recruitment',
			toUserId: memberId,
			jobId: id,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif
	}
	// 收藏
	const meiyeCollection2AddFun = () => {
		let data = {
			colProductId: jobId.value,
			colType: 4
		}
		proxy.$req('POST', proxy.$api.meiyeCollection2Add, data).then((res) => {
			if (res.code === 200) {
				uni.showToast({
					title: '收藏成功',
					icon: 'none'
				})
				getDetail()

			}
		})
	}
	// 取消收藏
	const meiyeCollection2DeleteFun = () => {
		let data = {
			id: state.detailsData.collId,
		}
		proxy.$req('DELETE', proxy.$api.meiyeCollection2Delete, data).then((res) => {
			if (res.code === 200) {
				uni.showToast({
					title: '取消成功',
					icon: 'none'
				})
				getDetail()
			}
		})
	}
	// 申请岗位
	const meiyeCollection2ApplyFun = () => {
		proxy.$req('GET', proxy.$api.meiyeCollection2Apply, { id: jobId.value }).then((res) => {
			if (res.code === 200) {

				modalData.show = true
				let job = state.detailsData.jobCategoryName
				modalData.content = `${job}岗位已投递成功，请等待老板回复`
		
			
			}
		})
	}
</script>

<style lang="scss" scoped>
	.content-main {
		color: #636366;
		text-align: center;
		line-height: 60rpx;
	}

	.custom-style {
		color: #CB645E;
		width: 220rpx;
		border: 1rpx solid #CB645E;
		border-radius: 10rpx;
	}

	.content {
		padding: 0 24rpx 200rpx;
		background: #f6f6f6;
		// height: calc(100% - 100rpx);
		overflow: hidden;
		overflow-y: auto;
		box-sizing: border-box;


		.detailName {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.dn1 {
				font-size: 40rpx;
				font-weight: 600;
				margin: 30rpx 0 40rpx;
			}

			.dn2 {
				font-weight: 600;
				margin-bottom: 20rpx;
				color:#CB645E;
			}

			.dn3 {
				font-size: 26rpx;
				color: #939393;
			}
		}

		.detailTag {
			// padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;

			.dt1 {
				font-size: 36rpx;
				font-weight: 600;
			}

			.dt2 {
				margin-top: 15rpx;
				display: flex;
				flex-wrap: wrap;

				text {
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					color: rgba(0, 0, 0, 0.85);
					border-radius: 4px;
					margin-right: 10rpx;
					margin-top: 10rpx;
					background:#FAFAFA;
				}
			}
		}

		.detailIntro {
			margin-top: 20rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eeeeee;

			.di1 {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			text {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.detailAddress {
			margin-top: 20rpx;
			border-bottom: 1rpx solid #eee;

			.da1 {
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.da2 {
				background-color: #000;
			}

			.da3 {
				padding: 12rpx 0 16rpx 0;
				color: #8E8E93;
			}
		}

		.detailCompany {
			margin-top: 29rpx;

			.dc1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 18rpx;
			}

			.dc2 {
				font-size: 24rpx;
				color: #909399;
				margin-bottom: 20rpx;
			}

			.dc3 {

				.companyImg {
					width: 100%;
				}
			}
		}
	}

	.card {
		background: #fff;
		box-sizing: border-box;
		// border: 2rpx solid #fff;
		margin: 30rpx auto;
		padding: 24rpx;
		// background: #fff;
		border-radius: 24rpx;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
	}

	.detailBottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 130rpx;
		// background-color: #d5d5d5;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.dbLeft {
			display: flex;
		}

		.db1 {
			width: 110rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.dbText {
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #909399;
			}
		}

		.dbBtn {
			width: 300rpx;
			height: 88rpx;
			// background-color:#0000004d;;
			background: #cb645e;
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>